<template>
  <div style="position:relative;">
    <div class="tool-bar">
      <div class="search-box">
        <div class="search-input">
          <input @keyup.enter="search" v-model="searchParams.question" placeholder="请输入问题或答案"/>
        </div>
        <div class="search-btn" @click="search">搜索</div>
        <div class="add-btn" @click="editIndex = -1">
          <i class="el-icon-plus"></i> 新增</div>
      </div>
    </div>
    <div class="knowledge-list">
      <div class="knowledge" v-for="(item,index) in knowledgeList">
        <div class="question" v-text="item.question"></div>
        <div class="description" v-text="'答: '+item.description.replace(/<\/?.+?>/g,'')"></div>
        <div class="info">
          <div class="created" v-text="item.gmtModified"></div>
          <div class="action">
            <div class="edit" @click="showEdit(item,index)">编辑</div>
            <div class="delete" @click="deleteKnowledge(item.knowledgeId,index)">删除</div>
          </div>
        </div>
      </div>
      <div class="empty" v-if="!loading && knowledgeList.length == 0">
        查询结果为空
      </div>
    </div>
    <div class="loading" v-if="loading">
      <i class="el-icon-loading"/>
    </div>
    <el-dialog :modal-append-to-body="false" title="编辑" @close="hideEdit" :visible="editIndex!=null">
      <Edit ref="editBox" @submit="saveKnowledge"></Edit>
    </el-dialog>
  </div>
</template>

<script>
import {getByTenantId, deleteById, save} from "@/api/knowledge";
import Edit from './components/edit'

export default {
  name: "knowledge",
  components:{
    Edit
  },
  data(){
    return {
      loading:false,
      knowledgeList:[],
      searchParams:{
        year:null,
        month:null,
        question: null
      },
      editIndex:null
    }
  },
  created() {
    let that = this
    this.search()
  },
  methods: {
    saveKnowledge(form){
      let that = this
      save(form).then(res => {
        if(res.code == 200) {
          if(this.editIndex == -1) {
            this.$message.success('添加成功')
            this.knowledgeList.push(res.data)
          }else{
            form.description = form.answer.substr(0,80)
            this.$message.success('保存成功')
            this.knowledgeList[this.editIndex] = form
          }
          this.editIndex = null
        }
      }).catch(err => {
        this.$message.error('保存失败' + err)
      })
    },
    search(){
      let that = this
      this.loading = true
      getByTenantId(this.searchParams).then(res => {
        if(res.code == 200) {
          that.knowledgeList = res.data
          res.data.forEach(function (item) {
            console.log(item.description)
            console.log(item.description.replace(/<\/?.+?>/g,''))
          })
        }
      }).catch(err => {
        this.$message.error('查询失败' + err)
      }).finally(function (){
        that.loading = false
      })
    },
    hideEdit(){
      this.editIndex = null
      this.$refs['editBox'].reset()
    },
    showEdit(item,index) {
      this.editIndex = index
      if(index == -1) {
        return
      }
      this.$nextTick(function (){
        console.log('do it')
        this.$refs['editBox'].getKnowledge(item.knowledgeId)
      })
    },
    deleteKnowledge(id,idx){
      this.$confirm('是否删除该项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(res => {
          if(res.code == 200) {
            this.knowledgeList.splice(idx,1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!原因：' + res.msg
            });
          }
        })
      }).catch(()=>{

      });
    }
  }
}
</script>

<style scoped lang="less">
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    z-index: 2;
  }

  .tool-bar {
    padding: 20px 10px;
    display: flex;
    .date {
      display: flex;
      .el-select {
        width: 120px;
      }
      .year {

      }
      .month {
        margin-left: 10px;
      }
    }
    @media(max-width: 679px) {
      .date{
        display: none;
      }
    }
    .search-box {
      display: flex;
      margin-left: 10px;
      flex: 1;
      .search-input {
        flex: 1;
        input {
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          box-sizing: border-box;
          padding: 0px 12px;
          border: 1px solid #DCDFE6;
          color: #606266;
        }
      }
      .search-btn {
        border: 1px solid #0091FF;
        color: #0091FF;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
      }

      .add-btn {
        border: 1px solid #666666;
        color: #666666;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }
  .knowledge-list {
    .empty {
      line-height: 100px;
      text-align: center;
      font-size: 18px;
      color: #666666;
    }
    .knowledge {
      margin: 20px;
      padding: 10px;
      border-bottom: 1px solid #F0F0F0;
      word-break: keep-all;
      overflow: hidden;
      white-space: nowrap;

      .question {
        font-size: 18px;
        font-weight: bold;
        color: #666666;
        padding-bottom: 10px;
      }
      .description {
        font-size: 14px;
        color: #888888;
        padding: 5px 0;
      }
      .info {
        display: flex;
        .created {
          flex: 1;
          font-size: 14px;
          color: #8E8E8E;
        }
        .action {
          display: flex;
          font-size: 14px;
          color: #888888;
          .edit {
            cursor: pointer;
            &:hover {
              color: #0091FF;
            }
          }
          .delete {
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    width: 679px;
  }
</style>
